<template>
	<view>
		<view class="money flex justify-center align-center solid-bottom">
			冻结金额： <text class="text-orange">￥{{ freeze || '0.00' }}</text>
		</view>
		<view class="list">
			<block v-for="(item, index) in list" :key="index">
				<view 
					@click="onDealDetail(item.id)"
					class="item solid-bottom">
					<view class="text-lg text-black margin-bottom-xs text-bold">{{item.title}}</view>
					<view class="text-ss text-grey margin-bottom-xs">卖出时间：{{item.created_at}}</view>
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<text class="text-lg" style="color: #FC4E11;">会员价格：￥{{item.price}}</text>
						</view>
						<text class="text-gray text-df">
							{{item.status == 3 ? '交易中' : '售后处理中'}}
						</text>
					</view>
				</view>
			</block>
			
			<!--正在加载 start-->
			<v-loadmore :visible="load"></v-loadmore>
			<!--正在加载 end-->
			
			<!--没有更多了 start-->
			<v-nomore :visible="!load && isMore"></v-nomore>
			
		</view>
	</view>
</template>

<script>
	import vNomore from "@/components/load/nomore.vue"
	import vLoadmore from "@/components/load/loadmore.vue"
	import userApi from "@/Api/User.js"
	
	export default {
		components: {
			vNomore,
			vLoadmore
		},
		data() {
			return {
				freeze: 0,
				current_page: 0,
				load: true,
				onMore: false,
				isMore: false,
				list: []
			};
		},
		onLoad(obj) {
			this.freeze = obj.freeze
			this.getList()
		},
		// 上拉回调方法
		onReachBottom() {
			if(!this.isMore) {
				this.getList()
			}
		},
		methods: {
			getList() {
				let { current_page, list } = this
				userApi.freezeList(current_page)
					.then(res=>{
						if(current_page == 0) list = []
						 let onMore = false
						 let len = res.data.length
						 len > 0 ? res.data.forEach(item =>  list.push(item)) :  onMore = true
						this.list = list
						this.load = false
						this.current_page = res.current_page
						this.isMore = len < res.per_page ? true: false
						this.onMore = onMore
					})
			},
			onDealDetail(id) { 
				this.onGoNext(`/pages/Deal/Detail/Detail?id=${id}`) 
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.money{
		margin: 0 40rpx;
		padding-top: 80rpx;
		padding-bottom: 103rpx;
		font-size: 36rpx;
		color: #000000;
		height: 59rpx;
		text{
			font-size: 42rpx;
			line-height: 59rpx;
		}
	}
	.list{
		padding: 0 40rpx;
		padding-bottom: 30rpx;
		.item{
			padding: 30rpx 0;
		}
	}
</style>
